import {Modal, Container, Card, Row, Col, Button, Form, Table} from 'react-bootstrap';
import style from './{table['alias']}.module.css'
import {save, update, list} from '@/api/{table['alias']}'
import {useState, useEffect, useCallback} from "react";


function {table['camel']}() {


    const [show, setShow] = useState(false);
    const [isAdd, setIsAdd] = useState(true);
    const [rows, setRows] = useState([]);
    const [model, setModel] = useState({});
    const [query, setQuery] = useState({});


    useEffect(() => {
        getList()
    }, []);

    const handleChange = useCallback((e, name) => {
        // console.log(e, name);
        model[name] = e.target.value;
        setModel(model);
    }, [model])

    const getList = useCallback(() => {
        list(query).then(res => {
            // console.log(res);
            setRows(res.data)
        })
    }, [rows])

    const handleClose = () => setShow(false);
    const handleShow = (data) => {
        if(data){
            setModel({});
            setIsAdd(true);
        }else{
            setModel(data);
            setIsAdd(false);
        }
        setShow(true);
    };

    const submit = () => {
        // console.log(model);
        save(model).then(res => {
            handleClose()
            toast.success("success");
        })
    }

    const dateFormat = (date) => {
        const dt = new Date(date)
        const y = dt.getFullYear()
        const m = (dt.getMonth() + 1).toString().padStart(2,'0')
        const d = dt.getDay().toString().padStart(2,'0')
        const hh = dt.getHours().toString().padStart(2,'0')
        const mm = dt.getMinutes().toString().padStart(2,'0')
        const ss = dt.getSeconds().toString().padStart(2,'0')
        let result = `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        //console.log(y, m, d, hh, mm, ss);
        return result
    }


    return (
        <Container fluid="md">
            <Card>
                <Card.Header>Search</Card.Header>
                <Card.Body>

                </Card.Body>
            </Card>

            <Card>
                <Card.Header>
                    <Row>
                        <Col sm="2">
                            <h3>Data List</h3>
                        </Col>
                        <Col sm="9"></Col>
                        <Col sm="1">
                            <Button variant="primary" onClick={handleShow}>Add</Button>
                        </Col>
                    </Row>
                </Card.Header>
                <Card.Body>
                <Table striped responsive className={style.table}>
                    <thead>
                        <tr>
                        <th>#</th>
                        {% for column in table['columns'] -%}
                        <th>{column['camel']}</th>
                        {%- endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {rows.map((row, index) => {
                            return <tr key={row.id}>
                                <td>{index + 1}</td>
                                {% for column in table['columns'] -%}
                                <td>{_{ + 'row.' + column['alias'] + _}}</td>
                                {%- endfor %}
                            </tr>
                        })}
                    </tbody>
                </Table>

                </Card.Body>
            </Card>

            <Modal show={show} onHide={handleClose}>
                <Modal.Header closeButton>
                <Modal.Title>Health Form</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Form>
                        {% for column in table['columns'] if column['form'] != '' -%}
                        {% if column['form'] == 'text' -%}
                        <Form.Group className="mb-3" controlId="model.{{column['alias']}}">
                            <Form.Label>{{column['camel']}}</Form.Label>
                            <Form.Control type="text" placeholder="" defaultValue={{_{ + "model." + {column['alias']} + _}}} onChange={(e) => handleChange(e, '{{{column['alias']}}}')}/>
                        </Form.Group>
                        {% elif column['form'] == 'password' -%}
                        <Form.Group className="mb-3" controlId="model.{column['alias']}">
                            <Form.Label>{column['camel']}</Form.Label>
                            <Form.Control type="password" placeholder="" defaultValue={{_{ + "model." + {column['alias']} + _}}} onChange={(e) => handleChange(e, '{{{column['alias']}}}')}/>
                        </Form.Group>
                        {% elif column['form'] == 'number' -%}
                        <Form.Group className="mb-3" controlId="model.{{column['alias']}}">
                            <Form.Label>{{column['camel']}}</Form.Label>
                            <Form.Control type="number" placeholder="" defaultValue={{_{ + "model." + {column['alias']} + _}}} onChange={(e) => handleChange(e, '{{{column['alias']}}}')}/>
                        </Form.Group>
                        {% elif column['form'] == 'textarea' -%}
                        <Form.Group className="mb-3" controlId="model.{{column['alias']}}">
                            <Form.Label>{{column['camel']}}</Form.Label>
                            <Form.Control as="textarea" rows={3} placeholder="" defaultValue={{_{ + "model." + {column['alias']} + _}}} onChange={(e) => handleChange(e, '{{{column['alias']}}}')}/>
                        </Form.Group>
                        {% elif column['form'] == 'select' -%}
                        <Form.Group className="mb-3" controlId="model.{{column['alias']}}">
                            <Form.Label>{{column['camel']}}</Form.Label>
                            <Form.Select aria-label="" defaultValue={{_{ + "model." + {column['alias']} + _}}} onChange={(e) => handleChange(e, '{{{column['alias']}}}'>
                              {% for d in column['data'] -%}
                              <option value="{{d['key']}}">{{d['val']}}</option>
                              {% endfor %}
                            </Form.Select>
                        </Form.Group>
                        </select>
                      {%- endif %}
                      {%- endfor %}
                    </Form>
                </Modal.Body>
                <Modal.Footer>
                <Button variant="secondary" onClick={handleClose}>
                    Close
                </Button>
                <Button variant="primary" onClick={submit}>
                    Save
                </Button>
                </Modal.Footer>
            </Modal>
        </Container>
    );
}

export default {table['camel']};